<template>
  <div class="login-container">
    <el-card class="login-card">
      <h2>再生道平台端登录</h2>
      <el-form ref="loginForm" :model="form" :rules="rules" label-width="100px">
        <!-- 用户名 -->
        <el-form-item label="用户名" prop="loginName">
          <el-input v-model="form.loginName" placeholder="请输入用户名"/>
        </el-form-item>

        <!-- 密码 -->
        <el-form-item label="密码" prop="loginPwd">
          <el-input type="password" v-model="form.loginPwd" placeholder="请输入密码"></el-input>
        </el-form-item>

      </el-form>

      <div style="float: right;">
        <el-button type="primary" @click="submitForm">登录</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        loginName: "",
        loginPwd: "",
      },
      rules: {
        loginName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        loginPwd: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 64, message: "密码长度应在6到64个字符之间", trigger: "blur" }
        ],
      },

    };
  },
  methods: {
    submitForm() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.$http
          .post("/zsd-permission/admin-info/login", {
            username: this.form.loginName,
            password: this.form.loginPwd,
          })
          .then((resp) => {
            if (resp.data.code === 200) {
              alert("登录成功");
              this.$router.replace({ name: "Index" });
            } else {
              alert(resp.data.msg);
            }
          })
          .catch((error) => {
            alert("账号或密码错误！");
          });
        } else {
          this.$message.error("账号或密码错误");
        }
      });
    },
  }
};
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.login-card {
  width: 500px;
  padding: 30px; /* 增加内边距 */
  border-radius: 20px; /* 加大圆角 */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* 加深阴影 */
  background-color: #ffffff; /* 卡片背景为白色 */
}

h2 {
  text-align: center;
  margin-bottom: 20px;
}
</style>
